// Variables
$font-family:
  Snell-Black,
  EarlySummer-Subset,
  EarlySummer,
  ui-serif,
  Georgia,
  Cambria,
  Times New Roman,
  Times,
  serif;

$app-max-width: 1580px;
$max-width: 1080px;
$small-max-width: 880px;

$header-height: 54px;

$content-image-max-height: 880px;
$comment-image-max-width: 80px;

$duration: 300ms;
$duration-slow: 500ms;

$line-height-normal: 1.4;
$line-height-large: 1.7;

$z-index-header: 1000;
$z-index-modal: 2010;
$z-index-mask: 2000;
$z-index-popover: 3000;

// Breakpoints
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

// Mixins
@mixin responsive($breakpoint) {
  @if $breakpoint == lt-sm {
    @media (max-width: $breakpoint-sm) {
      @content;
    }
  } @else if $breakpoint == lt-md {
    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) {
      @content;
    }
  } @else if $breakpoint == lt-lg {
    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
      @content;
    }
  } @else if($breakpoint == gt-lg) {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  }
}

@mixin hover-effect {
  transition: all $duration ease;
  &:hover {
    @content;
  }
}

@mixin text-gradient {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@mixin mask {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all $duration-slow ease;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mask-color);
    z-index: 1;
  }
}
